<template>
  <nav>
    <ul>
      <li
        v-for="(item, index) in nav"
        :key="item.id"
        @click="selectNav(index)"
        :class="item.select ? 'active' : ''"
      >
        {{ item.name }}
      </li>
    </ul>
  </nav>
</template>

<script>
import { getStoreNav } from "@/request/api";
export default {
  data() {
    return {
      nav: [],
      navUrls: [
        "/bookcity/recommend",
        "/bookcity/free",
        "/bookcity/male",
        "/bookcity/femail",
        "/bookcity/publish",
        "/bookcity/audio",
      ],
      params: [],
    };
  },
  methods: {
    selectNav(index) {
      this.nav.map((item) => {
        item.select = false;
        this.nav[index].select = true;
      });
      this.$emit("changeLoading", false);
      if (this.$route.path == this.navUrls[index]) return;
      this.$router.push({
        path: this.navUrls[index] + `?${this.params[index]}`,
      });
    },
  },
  activated() {},
  created() {
    getStoreNav({
      gender: this.$store.state.gender,
    }).then((res) => {
      if (res.resCode == 0) {
        this.nav = res.data.navi;
        this.nav.map((item) => {
          let str1 = item.url.split("?")[1];
          this.params.push(str1);
          this.selectNav(0);
          if (this.$route.path == "/bookcity/popup") return;
        });
      }
    });
  },
};
</script>

<style lang="scss" scoped>
nav {
  font-size: 16px;
  height: 40px;
  padding: 10px 14px 0;
  ul {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    li {
      position: relative;
      a {
        display: block;
        color: #666;
      }
    }
    .active {
      color: #000;
      font-size: 20px;
      // font-family: "宋体";
      &::after {
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        content: "";
        display: block;
        width: 20px;
        height: 4px;
        background-color: #e64d2e;
      }
    }
  }
}
</style>
